<template>
  <div class="video" v-if="info!=''">
    <div class="title-wrapper">
      <span class="tag">MV</span>
      <span class="title">{{info.name}}</span>
      <span class="artist">{{info.artists | filterArr}}</span>
    </div>
    <video :src="info.brs | formatBrs" controls></video>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      info: ""
    };
  },
  //   过滤器： 将对象中的数据提取成数组格式
  filters: {
    filterArr(arr) {
      let _arr = arr.map(item => {
        return item.name;
      });
      return _arr.join("/");
    },
    //视频清晰度选择
    formatBrs(obj) {
      //一次性取出所有的key的数组
      // obj={1:"aaa",2:"bbb"}  ====>["1","2"]
      // Math.max(...Object.keys(obj))

      let maxKey = 0;
      for (let key in obj) {
        if (key > maxKey) {
          maxKey = +key;
        }
      }
      return obj[maxKey];
    }
  },
  created() {
    axios({
      url: "http://183.237.67.218:3000/mv/detail?mvid=" + this.$route.query.mvid
    }).then(res => {
      //   window.console.log(res);
      this.info = res.data.data;
    });
  }
};
</script>

<style>
</style>